// 先创建复制7个球
function Top() {
    // 获取到父节点
    let $up = $('#bigCircle #upCircle');

    for (let i = 0; i < 6; i++) {
        // 拼接节点，将每次循环的节点拼接到父元素内
        $up.append(`<div class="ball-box">
        <ul class="ball">
            <li class="line1"><span>01</span></li>
            <li class="line2"></li>
            <li class="line3"></li>
            <li class="line4"></li>
            <li class="line5"></li>
            <li class="line6"></li>
        </ul>
    </div>`);
    };
    $up.append(`
    <div class="ball-box">
        <ul class="ball">
            <li class="line1"><span>01</span></li>
            <li class="line2"></li>
            <li class="line3"></li>
            <li class="line4"></li>
            <li class="line5"></li>
            <li class="line6"></li>
        </ul>
    </div>`);
    // 获取到拼接完成后的旋转球标签
    let $twos = $('.ball-box .ball li span');

    $('#footCircle')[0].innerHTML = `<p>本次号码为:</p>`
    //  红色球号码区由1-33  蓝色球号码区由1-16
    // 需要取到随机数，放置在旋转球内，且每个数字都不能相同
    // 获取随机数封装
    function randomAB(a, b) {
        return Math.round(Math.random() * (b - a)) + a;
    }
    //   点击时，获取球的内容
    $('#downCircle')[0].onclick = function () {
        // 循环创建数据
        for (var i = 0; i < $twos.length - 1; i++) {
            $twos[i].innerHTML = randomAB(1, 33);
            if ($twos[i].innerHTML == $twos[i + 1].innerHTML) {
                $twos[i].innerHTML == randomAB(1, 33);
            }
        }
        // 蓝号单独输出
        $twos[6].innerHTML = randomAB(1, 16);
        // 判断蓝号是否重复，如果重复，重新输出蓝号
        for (let i = 0; i < $twos.length - 1; i++) {
            if ($twos[6].innerHTML == $twos[i].innerHTML) {
                $twos[6].innerHTML = randomAB(1, 16);
            }
        }
        // 前导0
        function toTwo(n) {
            return n < 10 ? '0' + n : n;
        }
        // 将获取到的值拼接到总后结果
        $('#footCircle')[0].innerHTML = `<p>本次号码为: <span>
       ${toTwo($twos[0].innerText*1)} 
        </span><span>
        ${toTwo($twos[1].innerText*1)} 
        </span><span>
        ${toTwo($twos[2].innerText*1)} 
        </span><span>
        ${toTwo($twos[3].innerText*1)} 
        </span><span>
        ${toTwo($twos[4].innerText*1)} 
        </span><span>
        ${toTwo($twos[5].innerText*1)} 
        </span><span>
        ${toTwo($twos[6].innerText*1)} 
        </span></p>`
    };
}
Top()